<template>
    <div>
        <div>
            <span class="squarePoint"></span>
            年龄段人数
        </div>
        <div ref="AgeGroupChart" class="AgeGroupChart"></div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
import { getAgeGroupApi } from '../../http/Api.js'
export default {
    created() {
        this.getAgeGroup()
    },
    mounted() {

    },
    data() {
        return {
            group: [],
            count: []
        }
    },
    methods: {
        async getAgeGroup() {
            await getAgeGroupApi().then((res) => {
                res.data.forEach(item => {
                    for (let key in item) {
                        this.group.push(key)
                        this.count.push(item[key])
                    }
                })


                this.$nextTick(() => {
                    this.initAgeGroupChart()
                })

            }).catch(err => console.log(err))
        },
        initAgeGroupChart() {
            const ageGroupChart = echarts.init(this.$refs.AgeGroupChart);

            let yData = this.group
            let xData = this.count

            ageGroupChart.setOption({
                title: {
                    show: false
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisLabel: {
                        rotate: 30,
                        fontStyle: 'oblique',
                        color: "#fff",
                        fontSize: 10
                    },
                    interval: 50000, // 步长
                    min: 0, // 起始
                    max: 250000, // 终止
                    splitLine: {
                        lineStyle: {
                            // 刻度线 颜色
                            color: ['#333']
                        }
                    },
                },
                yAxis: {
                    type: 'category',
                    data: yData,
                    axisLabel: {
                        color: "#fff"
                    }
                },
                series: [
                    {
                        // 柱子的 高度设置
                        barMaxWidth: "8",
                        name: '2011',
                        type: 'bar',
                        itemStyle: {
                            // 普通样式。
                            normal: {
                                // 点的颜色。
                                color: '#00B2E8'
                            },
                            // 高亮样式。
                            emphasis: {
                                // 高亮时点的颜色。
                                color: '#FF9500'
                            }
                        },
                        data: xData
                    }
                ]
            })

            window.addEventListener("resize", () => {  //根据屏幕进行实时绘制
                ageGroupChart.resize();
            });
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/common.scss';

.squarePoint {
    @include squarePoint(15px, 10px, --themeColor02)
}

.AgeGroupChart {
    width: 100%;
    height: 4rem;
    margin-left: -10px;
    margin-top: -50px;
}
</style>